<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我是第一个Vue.js案例</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 在事件内调用简单的js代码 -->
        <!-- <button v-on:click="count+=Math.random()">单机</button>

        <p>产生的随机数累加和{{count}}</p> -->
        <!-- <input type="text" @keyup.enter="submit"> -->
        <!-- v-on:可以简写为@ -->
        <!-- <button @click="submit">登录</button> -->

        <!-- <div @click="doParent">
            <button @click="doThis">事件冒泡</button>
            <button @click.stop="doThis">阻止事件冒泡</button>
        </div> -->

        <!-- @click.prevent阻止默认行为 -->
        <!-- <a href="https://www.ahdy.edu.cn" @click.prevent>阻止默认行为</a> -->

        <!-- <div @click.capture="doParent">
            <div @click="doThis">事件捕获</div>
        </div> -->
        
        <!-- <div @click.self="doParent">A
            <div @click="doThis">B</div>
        </div> -->
        <!-- <div @click="doParent">C
            <div @click.self="doThis">D</div>
        </div> -->

        <!-- <div @click="doParent">C -->
            <!-- once只执行一次 -->
            <!-- <div @click.once="doThis">D</div>
        </div> -->
        <!-- <my-component></my-component>
        <div>{{msg}}</div> -->

        <my-component></my-component>
    </div>
    <template id="tmp1">
        <div>
            <div>
                <p><span>{{msg}}</span></p>
            </div>
        </div>
    </template>
    <!-- <my-component></my-component> -->
    <script>
        // var vm = new Vue({
        //     el: '#app',
        //     data: {
        //         count: 0
        //     },
        //     methods:{
        //         doParent(){
        //             console.log("我是父元素");
        //         },
        //         doThis(){
        //             console.log("我是子元素");
        //         }
        //     }
        // })

//利用component（）API创建组件
        // Vue.component("my-component",{
        //     data(){
        //         return{
        //             msg:"world"
        //         }
        //     },
        //     template:"<p>{{msg}}</p>"
        // });


        // var com1={
        //     template:"<p>我是组建</p>"
        // }
        // var vm = new Vue({

        //     el: '#app',
        //     data: {
        //         msg:"hello"
        //     },
        //     // 利用component属性进行局部注册
        //     components:{
        //         // "my-component":com1
        //         myComponent:com1
        //     }
        // })
        Vue.component("my-component",{
                template:"#tmp1",
                data(){
                    return{
                        msg:"我是组建信息"
                    }
                }
        }) 
        var vm=new Vue({
            el:"#app",
            data:{
                msg:'hello'
            }
        })
    </script>
</body>

</html>